**在components建一个组件文件**
<template>
	<div class="keyborad" :style="{transform:show_key?'translateY(0)':'translateY(100%)'}">
		<div class="key_main">
			<div class="main_title">

				<span class="cuIcon-close span-reding" @click="cacelFun"></span>
				<span>请输入支付密码</span>
			</div>
			<div class="main_content">
				<div class="content_num">
					<div v-for="item in inputArray" :key="item" class="content_item">{{password[item-1] ? '●' :''}}</div>
				</div>
				<!-- <div class="main_forget" @tap="forgetFun">忘记密码</div> -->
			</div>
			<div class="main_keyboard">
				<div class="key_num" v-for="item in numberArray" :key="item" @click="inputNumFun({num:item})">{{item}}</div>
				<div class="key_null" @click="hideFun">确定</div>
				<div class="key_0"  @click="inputNumFun({num:0})">0</div>
				<div class="key_del" @click="delNumFun">
					删除
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			show_key:Boolean
		},
		computed:{},
		data(){
			return{
				inputArray:[1,2,3,4,5,6],//输入密码的长度
				numberArray:[1,2,3,4,5,6,7,8,9],//密码键盘的数字
				password:'',//密码
			}
		},
		methods:{
			inputNumFun(op){
				let _this = this
				if(_this.password.length <=6){
					_this.password += op.num
					if(_this.password.length == 6){
						_this.$emit('getPassword',{password:_this.password})
					}
				}

			},
			delNumFun(){
				if(this.password.length == 0) return
				this.password = this.password.substring(0,this.password.length - 1)
				console.log("删除后的结果",this.password)
			},
			forgetFun(){
				uni.showToast({
					title:'忘记密码操作',
					icon:'none'
				})
			},
			hideFun(){
				console.log("close")
				this.$emit('hideFun')
				this.password = ""
			},
			cacelFun(){
				this.$emit('cacelFun')
				this.password = ""
			}
		}
	}
</script>

<style lang="scss">
	.keyborad{width:100vw;height: 100vh;background: rgba(0, 0, 0, 0.6);opacity: 1;z-index: 9999999;position: fixed;bottom: 0px;top:0px;left:0px;right:0px;z-index:100;display: flex;flex-direction: column;justify-content: flex-end;transform: translateY(100%);transition:all 0.4s;
		.key_main{ width:100vw;height:415px;background:#f1f1f1;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;
			.main_title{ font-size:34px;color: #000000;height: 100px;position: relative;  display: flex;align-items: center;letter-spacing: 2px;width:100%;box-sizing: border-box;padding:0px 20px;border-bottom:2px solid #e1e1e1;
				// .span-reding{ width:48px;height: 48px;position: relative;z-index:10}
				.span-reding{position: absolute;left:90px;color:red}
				span{ flex:1;margin-left:-48px;display: flex;justify-content: center;}
			}
			.main_content{ width:750rpx;box-sizing: border-box;padding:10px 30px;
				.content_num{ width:750rpx;height: 94rpx;border:2px solid #DBDBDB;border-radius: 10px;display: flex;align-items: center;
					.content_item{ width:94rpx;height: 94rpx;border-right: 2px solid #DBDBDB;display: flex;justify-content: center;align-items: center;}
					.content_item:last-child{ border-right:none}
				}
				.main_forget{ display: flex;justify-content: center;align-items: center;width:100%;font-size:28px;color: #007AFF;margin-top:40px}
			}
			.main_keyboard{ width:100%;height: 270px;background: #FFFFFF;display: flex;flex-flow: wrap;
				.key_null,.key_del{ background: #e2e7eb;}
				image{ width:48px;height: 48px;}
				.key_num,.key_null,.key_del,.key_0{ width: 125px;
    height:60px;display: flex;align-items: center;justify-content: center;}
				.key_num{ border-right:2px solid #f1f4f4;border-bottom:2px solid #f1f4f4;box-sizing: border-box;}
				.key_num:nth-child(8){border-bottom: none;}
				.key_0{ border-top:2px solid #f1f4f4}
			}
		}
	}
</style>

